//package com.example.compose
//
//import androidx.compose.animation.AnimatedContent
//import androidx.compose.animation.ExperimentalSharedTransitionApi
//import androidx.compose.animation.SharedTransitionLayout
//import androidx.compose.animation.fadeIn
//import androidx.compose.animation.fadeOut
//import androidx.compose.animation.slideInHorizontally
//import androidx.compose.animation.slideOutVertically
//import androidx.compose.animation.togetherWith
//import androidx.compose.foundation.Image
//import androidx.compose.foundation.clickable
//import androidx.compose.foundation.interaction.MutableInteractionSource
//import androidx.compose.foundation.layout.Column
//import androidx.compose.foundation.layout.Row
//import androidx.compose.foundation.layout.Spacer
//import androidx.compose.foundation.layout.fillMaxSize
//import androidx.compose.foundation.layout.fillMaxWidth
//import androidx.compose.foundation.layout.size
//import androidx.compose.foundation.lazy.LazyColumn
//import androidx.compose.material3.Text
//import androidx.compose.runtime.Composable
//import androidx.compose.runtime.getValue
//import androidx.compose.runtime.mutableStateOf
//import androidx.compose.runtime.remember
//import androidx.compose.runtime.setValue
//import androidx.compose.ui.Modifier
//import androidx.compose.ui.layout.ContentScale
//import androidx.compose.ui.res.painterResource
//import androidx.compose.ui.tooling.preview.Preview
//import androidx.compose.ui.unit.dp
//import androidx.compose.ui.unit.sp
//
//sealed class Screen {
//    object List : Screen()
//    data class Details(val item: Int) : Screen()
//}
//
//@OptIn(ExperimentalSharedTransitionApi::class)
//@Preview
//@Composable
//fun ListToDetailsDemo() {
//    var state by remember {
//        mutableStateOf<Screen>(Screen.List)
//    }
//    val images = listOf(
//        R.drawable.bella,
//        R.drawable.koda,
//        R.drawable.leroy,
//        R.drawable.lola,
//        R.drawable.nox,
//        R.drawable.tzeitel
//    )
//    SharedTransitionLayout(modifier = Modifier.fillMaxSize()) {
//        AnimatedContent(
//            targetState = state,
//            label = "",
//            contentKey = { it.javaClass },
//            transitionSpec = {
//                if (initialState == Screen.List) {
//                    slideInHorizontally { -it } + fadeIn() togetherWith
//                            slideOutVertically { it } + fadeOut()
//                } else {
//                    slideInHorizontally { it } togetherWith
//                            slideOutVertically { -it } + fadeOut()
//                }
//            }
//        ) {
//            when (it) {
//                Screen.List -> {
//                    LazyColumn {
//                        items(50) { item ->
//                            Row(
//                                modifier = Modifier
//                                    .clickable(
//                                        interactionSource = remember { MutableInteractionSource() },
//                                        indication = null
//                                    ) {
//                                        state = Screen.Details(item)
//                                    }
//                                    .fillMaxWidth()
//                            ) {
//                                Image(
//                                    painter = painterResource(id = images[item % 3]),
//                                    contentDescription = null,
//                                    modifier = Modifier
//                                        .size(100.dp)
//                                        .then(
//                                            if (item % 3 < 2) {
//                                                Modifier.sharedElement(
//                                                    state = rememberSharedContentState(key = "item-image$item"),
//                                                    animatedVisibilityScope = this@AnimatedContent
//                                                )
//                                            } else {
//                                                Modifier
//                                            }
//                                        ),
//                                    contentScale = ContentScale.Crop
//                                )
//                                Spacer(modifier = Modifier.size(15.dp))
//                                Text(text = "Item $item")
//                            }
//                        }
//                    }
//                }
//
//                is Screen.Details -> {
//                    val item = it.item
//                    Column(
//                        Modifier
//                            .fillMaxSize()
//                            .clickable(
//                                interactionSource = remember { MutableInteractionSource() },
//                                indication = null
//                            ) {
//                                state = Screen.List
//                            }
//                    ) {
//                        Image(
//                            painter = painterResource(id = images[item % 3]),
//                            contentDescription = null,
//                            modifier = Modifier
//                                .then(
//                                    if (item % 3 < 2) {
//                                        Modifier.sharedElement(
//                                            state = rememberSharedContentState(key = "item-image$item"),
//                                            animatedVisibilityScope = this@AnimatedContent
//                                        )
//                                    } else Modifier
//                                )
//                                .fillMaxWidth(),
//                            contentScale = ContentScale.Crop
//                        )
//                        Text(text = "item $item", fontSize = 23.sp)
//                    }
//                }
//            }
//        }
//    }
//}
